/**
 * @description: @include 全局使用mixin 样式
 */


// 背景图片
@mixin bg-image($url) {
  background-image: url($url + "@2x.png");
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
    background-image: url($url + "@3x.png");
  }
}

// 禁止折行
@mixin no-wrap() {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

// 扩展小图标按钮的点击区域
@mixin extend-click() {
  position: relative;
  &:before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
  }
}

/* 清除自身样式 */
@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

/* 宽度高度 */
@mixin wh($width, $height) {
  width: $width;
  height: $height;
}

/* 最小宽高 */
@mixin minwh($width, $height) {
  min-width: $width;
  min-height: $height;
}

/* 最大宽高 */
@mixin maxwh($width, $height) {
  max-width: $width;
  max-height: $height;
}

/* 字体 - 颜色 - 粗黑 */
@mixin scw($size: 14px, $color: #333, $weight: 400) {
  font-size: $size;
  color: $color;
  font-weight: $weight;
}

/* 字体大小 */
@mixin sw($size, $weight) {
  font-size: $size;
  font-weight: $weight;
}

/* flex 居中1 */
@mixin fixcc {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* positon 居中2 */
@mixin pcc {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* flex 居中3 */
@mixin fcc() {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* flex 仅上下居中 */
@mixin fh {
  display: flex;
  align-items: center;
}

/* flex 设置盒子对齐方向 */
@mixin fj($type: space-between) {
  display: flex;
  justify-content: $type;
}

/* relative 脱离文档流 定位起 */
@mixin relative {
  position: relative;
  width: 100%;
  height: 100%;
}

/* absolute 脱离文档流 定位终 按照 上 有 下 左规则 */
@mixin absolute($top: null, $right: null, $bottom: null, $left: null) {
  position: absolute;
  @if ($left!= "" & & $left!=null) {
    left: $left;
  }
  @if ($right!= "" & & $right!=null) {
    right: $right;
  }
  @if ($top!= "" & & $top!=null) {
    top: $top;
  }
  @if ($bottom!= "" & & $bottom!=null) {
    bottom: $bottom;
  }
}

/* flex 排列顺序 */
@mixin flex($direction: column, $wrap: nowrap) {
  display: flex;
  flex-direction: $direction;
  flex-wrap: $wrap;
}

/* 文字超出自动截取 */
@mixin ellipsis($line: 2, $line-height: 1.2) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line;
  line-height: $line-height;
}

/* 文字超出自动截取 */
@mixin el {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* img 标签使用样式 */
@mixin backgroundImage($url) {
  background-image: url($url);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat 0 0;
}
